<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<style>
			html{
				width:100%;
				height: 100%;
			}
			body{
				width: 100%;
				height: 100%;
				
			}
			.main{
				width: 800px;
				height: 500px;
				border: 1px solid red;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			
				overflow:auto;
			}
			.item{
				width: 300px;
				height: 300px;
				border: 1px solid blue;
				
			}
		</style>
	</head>
	<body>
	<div class="main" id="main2"></div>
		<div class="main">
			<div class="item" id="item1">
				1
			</div>
			<div class="item" id="item2">
				2
			</div>
			<div class="item" id="item3">
				3
			</div>
			<div class="item" id="item4">
				4
			</div>
			<div class="item" id="item5">
				5
			</div>
			<div class="item" id="item6">
				6
			</div>
			<div class="item" id="item7">
				7
			</div>
			<div class="item" id="item8">
				8
			</div>
			<div class="item" id="item9">
				9
			</div>
			<div class="item" id="item10">
				10
			</div>
			<div class="item" id="item11">
				11
			</div>
			
		</div>
		
		
		<div class="main"></div>
		<div class="main"></div>
		<div class="main"></div>
		
		<script>
			$(function(){
				// 监听.main元素滚动,当.main发生滚动时触发这个回调函数
			$(".main").scroll(function() {
		
				
				//监听 #item4 元素距离父亲元素顶部距离
				//console.log($("#item4").position().top)
				
				//监听 #item4 元素距离整个页面顶部的距离
				//console.log($("#item4").offset().top)
			});
			
			//监听整个页面窗口的滚动,当整个页面窗口发生滚动时触发这个回调函数
			$(window).scroll(function() {
				// 监听此时 窗口 距离页面顶部的位置(滚动条距离顶部的高度)
				 console.log( $(window).scrollTop()+"px");
				
				//监听 #item4元素 距离父亲元素顶部距离
				// console.log($("#item4").position().top)
				
				//监听 #item4元素 距离整个页面顶部的距离
				// console.log($("#item4").offset().top)
			
			});
			
			//当鼠标在页面中移动时触发这个回调函数
			$(window).mousemove(function(e){
				//获取此时鼠标距离整个页面顶部的距离
				// console.log(e.pageX)
				// console.log(e.pageY)
			})
			
			
			$(".main").hover(function(e){
				
				$(".main").css("cursor","move")
				//当鼠标移入或移出.main元素中时获取此时鼠标相对于整个页面顶部和整个页面左侧的距离
				// console.log(e.pageX);
				// console.log(e.pageY);
				
			})
			
	
			})
		
		</script>
	</body>
</html>
